<template>
    <footer class="app-footer">
        <div class="container">
            <!-- 顶部区域 -->
            <div class="footer-top">
                <!-- logo -->
                <div class="logo-tel">
                    <img src="/images/footer-logo.png" alt="logo" class="footer-logo" />
                    <div class="tel fn-clear">
                        <div class="text">{{ $t('footer.contact') }}</div>
                        <div class="numbers">
                            <span v-for="item in contactList">{{item.value}}</span>
                        </div>
                    </div>
                </div>
                <!-- 友情链接 -->
                <div class="friend-links">
                    <h4 class="link-title">{{ $t('footer.Friendship-link') }}</h4>
                    <ul class="link-list">
                        <li v-for="(link, index) in links" :key="index">
                            <a :href="link.value" target="_blank">{{ link.name }}</a>
                        </li>
                    </ul>

                    <div class="gov-department" v-if="departments.length > 0">
                        <div class="dropdown-title" @mouseenter="isOpen = true" @mouseleave="isOpen = false">
                            {{ $t('footer.Website-link') }}
                            <span>▼</span>
                            <transition name="fade">
                                <ul v-show="isOpen" class="dropdown-menu">
                                    <li v-for="(department, index) in departments" :key="index">
                                        <a :href="department.value" target="_blank">{{ department.name }}</a>
                                    </li>
                                </ul>
                            </transition>
                        </div>
                    </div>
                </div>
                <!-- 我们的信息 -->
                <div class="contact-info">
                    <div class="contact-group">
                        <div class="contact-item" v-for="item in footer.customsList">
                            <span class="label">{{item.name}}：</span>
                            <span class="text">{{ item.value }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部区域 -->
            <div class="footer-bottom">
                <div class="copyright">
                    <a href="https://beian.mps.gov.cn/#/query/webSearch" target="_blank"><p><img src="/images/logo01.dd7ff50e.png" alt="滇公网安备53010002000243号" style="width:20px;height: 20px;vertical-align: -3px;margin-right: 5px;">滇公网安备53010002000243号</p></a>
                </div>
            </div>
        </div>
    </footer>
</template>

<script setup>
const { locale, setLocale, t } = useI18n()
const { $fetchGov } = useNuxtApp()
const footer = ref(null)
const contactList = ref([])
// const links = ref([])

const { data: footerData } = await useAsyncData(
    `footer-${new Date().getTime()}`,
    () => $fetchGov('/app/api/env/site-info', {
        method: 'GET',
        _t: Date.now()
    })
)
footer.value = footerData.value.data;

//联系我们数据
const { data: contactUs } = await useAsyncData(
    `footer-${new Date().getTime()}`,
    () => $fetchGov('/app/api/env/list-by-alias', {
        method: 'GET',
        params: {
            alias: 'lxfs'
        },
        _t: Date.now()
    })
)
contactList.value = contactUs.value.data;

//友情链接数据
const { data: linkData } = await useAsyncData(
    `links-${new Date().getTime()}`,
    () => $fetchGov('/app/api/env/list-by-alias', {
        method: 'GET',
        params: {
            alias: 'yqlj'
        },
        _t: Date.now()
    })
)

const links = computed(() => {
    //前9个
    return linkData.value.data.slice(0, 6);
})

const departments = computed(() => {
    //9个以后
    return linkData.value.data.slice(6);
})


const isOpen = ref(false)

</script>

<style lang="scss" scoped>
$primary-color: #1867CA;
$mytext-color: #90A7ED;
//   $border-color: #ddd;

.app-footer {
    background: #fff url('/images/footer-bg.png') no-repeat center/cover;
    padding: 20px 0 20px;
    height: 22rem;
    color: $mytext-color;

    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 15px;
        position: relative;
    }

    .footer-top {
        display: flex;
        padding:2.5rem 0;
        // grid-template-columns: 1fr 1.5fr 1fr;

        .logo-tel {
            width: 25%;

            .footer-logo {
                width: 235px;
            }

            .tel {
                margin: 28px 0;

                .text {
                    float: left;
                    font-size: 1rem;
                    background: $primary-color;
                    color: #F0F0F0;
                    padding: 5px 20px;
                    border-radius: 20px;
                    margin-top: 9px;
                    margin-right: 20px;
                }

                .numbers {
                    float: left;

                    span {
                        display: block;
                        color: #CDDAFF;
                        font-size: 16px;
                    }
                }


                // display: flex;
                // flex-direction: column;
                // gap: 5px;
                // font-size: 16px;
                // color: #666;
            }
        }

        .contact-info {
            width: 35%;
        }

        @media (max-width: 768px) {
            grid-template-columns: 1fr;
        }
    }

    .org-name {
        color: $primary-color;
        font-size: 20px;
        margin-bottom: 20px;
    }

    .contact-group {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .contact-item {
        // display: flex;
        align-items: center;
        flex-wrap: wrap;
        font-size: 1rem;
        color: $mytext-color;

        span {
            float: left;
        }

        .label {
            min-width: 4.6rem;
            color: #CDDAFF;
        }

        .text {
            width: calc(100% - 6rem);
        }

        .sep {
            margin: 0 8px;
            color: #999;
        }

        a {
            color: $mytext-color;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    .friend-links {
        width: 35%;
        margin: 0 6.5% 0 3.5%;

        .link-title {
            font-size: 1.1rem;
            color: #CDDAFF;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        .link-list {
            list-style: none;
            padding: 0;
            margin-top: 15px;
            columns: 2;
            li {
                margin-bottom: 8px;

                a {
                    color: $mytext-color;
                    text-decoration: none;
                    transition: color 0.3s;
                    font-size: 1rem;

                    &:hover {
                        color: #fff;
                    }
                }
            }

            @media (max-width: 480px) {
                columns: 1;
            }
        }

        .gov-department {
            margin-top: 20px;
            position: relative;

            .dropdown-title {
                cursor: pointer;
                color: $primary-color;
                font-weight: 500;
                padding: 6px 12px;
                // border: 1px solid #ddd;
                background: #014CA8;
                border-radius: 4px;
                display: inline-block;
                transition: all 0.3s;
                width: 240px;
                position: relative;
                &:hover {
                    background: #f5f5f5;
                    span{
                        transform: translateY(-50%) rotate(180deg);
                    }
                }
                span{
                    position: absolute;
                    right: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                    transition: transform 0.3s;
                }
            }

            .dropdown-menu {
                position: absolute;
                bottom: 100%;
                left: 0;
                background: #fff;
                border: 1px solid #ddd;
                border-radius: 4px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                width: 240px;
                margin-top: 8px;
                padding: 8px 0;
                z-index: 100;
                list-style: none;

                li {
                    padding: 8px 16px;
                    cursor: pointer;
                    transition: all 0.2s;
                    color: #333;
                    a{
                        color: #333;
                        text-decoration: none;
                    }
                    &:hover {
                        background: $primary-color;
                        color: white;
                        a{
                            color: white;
                        }
                    }
                }
            }

            .fade-enter-active,
            .fade-leave-active {
                transition: opacity 0.3s, transform 0.3s;
            }

            .fade-enter-from,
            .fade-leave-to {
                opacity: 0;
                transform: translateY(-10px);
            }
        }

        @media (max-width: 768px) {
            .gov-department {
                .dropdown-menu {
                    width: 100%;
                    left: 0;
                    right: 0;
                }
            }
        }
    }

    .footer-bottom {
        font-size: 14px;
        width: 100%;
        text-align: center;
        height: 29px;
        line-height: 29px;
        position: absolute;
        bottom: -2.6rem;
        left: 0;
        .copyright {
            color: #CDDAFF;
            a{
                color: #CDDAFF;
                text-decoration: none;
                font-size: 1rem;
            }
        }

        .extra-links {
            a {
                color: #666;
                text-decoration: none;
                margin: 0 8px;

                &:hover {
                    color: $primary-color;
                }
            }

            .sep {
                color: #999;
            }
        }

        @media (max-width: 576px) {
            flex-direction: column;
            gap: 10px;
            text-align: center;
            bottom: -1rem;
        }
    }

    @media screen and (max-width: 768px) {
        background-image: none;
        background-color: #014CA8;
        height: auto;

        .container {
            max-width: 100%;

            .footer-top {
                display: block;

                .logo-tel {
                    width: 100%;
                    text-align: center;
                   .footer-logo {
                        width:10rem;
                    }
                    .tel{
                        margin: .5rem 0 1rem;
                        .text{
                           margin: 0;
                        }
                        .numbers{
                            margin-top: 2px;
                            span{
                                display: inline;
                                &:nth-child(1) {
                                    margin:0 1rem
                                }
                            }
                       }
                    }
                }

                .friend-links {
                    width: 100%;
                    margin: 0;
                    .link-title{
                        padding-bottom: .5rem;
                    }
                    .link-list{
                        margin-top: .5rem;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
                        li{
                            width: 48%;
                            margin-bottom: .5rem;
                            text-align: center;
                        }
                    }
                    .gov-department{
                        margin-top: .5rem;
                        text-align: center;
                        .dropdown-title{
                            width: 80%;
                            background: #1b75ca;
                            color: #ddd;
                            font-size: .9rem;
                        }
                    }
                }
                .contact-info{
                    width: 100%;
                    margin:1rem 0;
                }
            }
        }
    }
}
</style>